<template>
  <div class="component-config">
    <el-form label-position="top" class="config-form">
      <!-- 组件基础信息 -->
      <div class="config-section">
        <h4 class="section-title"><el-icon><InfoFilled /></el-icon>基础信息</h4>
        <el-form-item label="组件名称">
          <el-input v-model="config.name" placeholder="请输入组件名称" @change="updateName" />
        </el-form-item>
      </div>
      
      <!-- 位置和尺寸 -->
      <div class="config-section">
        <h4 class="section-title"><el-icon><Position /></el-icon>位置和尺寸</h4>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="X坐标">
              <el-input-number 
                v-model="config.style.left" 
                :min="0" 
                :max="2000"
                :controls="false"
                @change="updateStyle('left')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Y坐标">
              <el-input-number 
                v-model="config.style.top" 
                :min="0" 
                :max="2000"
                :controls="false"
                @change="updateStyle('top')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="宽度">
              <el-input-number 
                v-model="config.style.width" 
                :min="10" 
                :max="2000"
                :controls="false"
                @change="updateStyle('width')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高度">
              <el-input-number 
                v-model="config.style.height" 
                :min="10" 
                :max="2000"
                :controls="false"
                @change="updateStyle('height')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      
      <!-- 样式设置 -->
      <div class="config-section">
        <h4 class="section-title"><el-icon><Brush /></el-icon>基础样式</h4>
        <el-form-item label="旋转角度">
          <el-slider
            v-model="config.style.rotate"
            :min="-180"
            :max="180"
            :step="1"
            show-input
            @change="updateStyle('rotate')"
          >
            <template #icon>
              <el-icon><Refresh /></el-icon>
            </template>
          </el-slider>
        </el-form-item>
        
        <el-form-item label="不透明度">
          <el-slider
            v-model="config.style.opacity"
            :min="0"
            :max="100"
            :step="1"
            show-input
            @change="updateStyle('opacity')"
          >
            <template #icon>
              <el-icon><View /></el-icon>
            </template>
          </el-slider>
        </el-form-item>
      </div>
      
      <!-- 组件特有配置 -->
      <div class="config-section" v-if="hasSpecificConfig">
        <h4 class="section-title"><el-icon><Setting /></el-icon>组件配置</h4>
        
        <!-- 文本组件配置 -->
        <template v-if="component.type === 'text'">
          <el-form-item label="文本内容">
            <el-input
              v-model="config.props.content"
              type="textarea"
              :rows="3"
              placeholder="请输入文本内容"
              @change="updateProps('content')"
            />
          </el-form-item>
          
          <el-form-item label="字体设置">
            <el-row :gutter="12">
              <el-col :span="12">
                <el-input-number
                  v-model="config.props.style.fontSize"
                  :min="12"
                  :max="100"
                  :controls="false"
                  placeholder="字号"
                  @change="updateProps('style.fontSize')"
                />
              </el-col>
              <el-col :span="12">
                <el-select 
                  v-model="config.props.style.fontWeight"
                  placeholder="字重"
                  @change="updateProps('style.fontWeight')"
                >
                  <el-option label="正常" value="normal" />
                  <el-option label="加粗" value="bold" />
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
          
          <el-form-item label="文字颜色">
            <el-color-picker
              v-model="config.props.style.color"
              show-alpha
              @change="updateProps('style.color')"
            />
          </el-form-item>
          
          <el-form-item label="对齐方式">
            <el-radio-group 
              v-model="config.props.style.textAlign"
              @change="updateProps('style.textAlign')"
            >
              <el-radio-button label="left">
                <el-icon><Edit /></el-icon>
              </el-radio-button>
              <el-radio-button label="center">
                <el-icon><Grid /></el-icon>
              </el-radio-button>
              <el-radio-button label="right">
                <el-icon><Share /></el-icon>
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </template>

        <!-- 图片组件配置 -->
        <template v-if="component.type === 'image'">
          <el-form-item label="图片地址">
            <el-input
              v-model="config.props.src"
              placeholder="请输入图片URL"
              @change="updateProps('src')"
            />
          </el-form-item>
          
          <el-form-item label="图片描述">
            <el-input
              v-model="config.props.alt"
              placeholder="请输入图片描述"
              @change="updateProps('alt')"
            />
          </el-form-item>
          
          <el-form-item label="填充模式">
            <el-select 
              v-model="config.props.objectFit"
              @change="updateProps('objectFit')"
            >
              <el-option label="填充" value="fill" />
              <el-option label="包含" value="contain" />
              <el-option label="覆盖" value="cover" />
              <el-option label="无缩放" value="none" />
            </el-select>
          </el-form-item>
        </template>

        <!-- 柱状图组件配置 -->
        <template v-if="isBarChart(component.type)">
          <el-form-item label="图表标题">
            <el-input v-model="config.props.title" @change="updateProps('title')" />
          </el-form-item>

          <el-form-item label="数据配置">
            <el-tabs>
              <el-tab-pane label="数据">
                <el-input
                  type="textarea"
                  v-model="dataString"
                  :rows="6"
                  placeholder="请输入JSON格式的数据"
                  @change="handleDataChange"
                />
              </el-tab-pane>
              <el-tab-pane label="样式">
                <el-form-item label="柱条颜色">
                  <el-color-picker 
                    v-model="config.props.color" 
                    show-alpha
                    @change="updateProps('color')"
                  />
                </el-form-item>
                
                <el-form-item label="是否显示标签">
                  <el-switch
                    v-model="config.props.showLabel"
                    @change="updateProps('showLabel')"
                  />
                </el-form-item>

                <el-form-item label="柱条宽度">
                  <el-slider
                    v-model="config.props.barWidth"
                    :min="10"
                    :max="50"
                    @change="updateProps('barWidth')"
                  />
                </el-form-item>

                <template v-if="component.type === 'bar-stack'">
                  <el-form-item label="堆叠名称">
                    <el-input
                      v-for="(series, index) in config.props.series"
                      :key="index"
                      v-model="series.name"
                      :placeholder="`系列${index + 1}名`"
                      style="margin-bottom: 8px;"
                      @change="updateProps('series')"
                    />
                  </el-form-item>
                </template>

                <template v-if="component.type === 'bar-gradient'">
                  <el-form-item label="渐变色">
                    <div class="gradient-colors">
                      <el-color-picker
                        v-model="config.props.gradientColors[0]"
                        show-alpha
                        @change="updateGradientColors"
                      />
                      <el-color-picker
                        v-model="config.props.gradientColors[1]"
                        show-alpha
                        @change="updateGradientColors"
                      />
                    </div>
                  </el-form-item>
                </template>
              </el-tab-pane>
              <el-tab-pane label="坐标轴">
                <el-form-item label="X轴名称">
                  <el-input 
                    v-model="config.props.xAxisName" 
                    @change="updateProps('xAxisName')"
                  />
                </el-form-item>
                
                <el-form-item label="Y轴名称">
                  <el-input 
                    v-model="config.props.yAxisName" 
                    @change="updateProps('yAxisName')"
                  />
                </el-form-item>

                <el-form-item label="显示网格线">
                  <el-switch
                    v-model="config.props.showGrid"
                    @change="updateProps('showGrid')"
                  />
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </template>

        <!-- 环形图组件配置 -->
        <template v-if="component.type.startsWith('ring-')">
          <el-form-item label="图表标题">
            <el-input v-model="config.props.title" @change="updateProps('title')" />
          </el-form-item>

          <el-form-item label="数据配置">
            <el-tabs>
              <el-tab-pane label="数据">
                <el-input
                  type="textarea"
                  v-model="dataString"
                  :rows="6"
                  placeholder="请输入JSON格式的数据"
                  @change="handleDataChange"
                />
              </el-tab-pane>
              <el-tab-pane label="样式">
                <el-form-item label="显示标签">
                  <el-switch
                    v-model="config.props.showLabel"
                    @change="updateProps('showLabel')"
                  />
                </el-form-item>

                <el-form-item label="内外半径">
                  <el-slider
                    v-model="config.props.radius"
                    range
                    :min="0"
                    :max="100"
                    :format-tooltip="val => val + '%'"
                    @change="updateProps('radius')"
                  />
                </el-form-item>

                <el-form-item label="中心位置">
                  <el-row :gutter="12">
                    <el-col :span="12">
                      <el-slider
                        v-model="config.props.center[0]"
                        :min="0"
                        :max="100"
                        :format-tooltip="val => val + '%'"
                        @change="updateCenter"
                      />
                    </el-col>
                    <el-col :span="12">
                      <el-slider
                        v-model="config.props.center[1]"
                        :min="0"
                        :max="100"
                        :format-tooltip="val => val + '%'"
                        @change="updateCenter"
                      />
                    </el-col>
                  </el-row>
                </el-form-item>

                <template v-if="component.type === 'ring-dynamic'">
                  <el-form-item label="颜色配置">
                    <div class="color-pickers">
                      <el-color-picker
                        v-model="config.props.color[0]"
                        show-alpha
                        @change="updateColors"
                      />
                      <el-color-picker
                        v-model="config.props.color[1]"
                        show-alpha
                        @change="updateColors"
                      />
                    </div>
                  </el-form-item>

                  <el-form-item label="动画效果">
                    <el-switch
                      v-model="config.props.animation"
                      @change="updateProps('animation')"
                    />
                  </el-form-item>
                </template>

                <template v-else>
                  <el-form-item label="颜色配置">
                    <div class="color-list">
                      <div v-for="(color, index) in config.props.color" :key="index" class="color-item">
                        <el-color-picker
                          v-model="config.props.color[index]"
                          show-alpha
                          @change="updateColors"
                        />
                      </div>
                      <el-button @click="addColor" circle>
                        <el-icon><Plus /></el-icon>
                      </el-button>
                    </div>
                  </el-form-item>
                </template>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </template>

        <!-- 表格组件配置 -->
        <template v-if="component.type.startsWith('table-')">
          <el-form-item label="表格配置">
            <el-tabs>
              <el-tab-pane label="数据">
                <el-form-item label="表格数据">
                  <el-input
                    type="textarea"
                    v-model="tableDataString"
                    :rows="6"
                    placeholder="请输入JSON格式的表格数据"
                    @change="handleTableDataChange"
                  />
                </el-form-item>
                
                <el-form-item label="列配置">
                  <el-input
                    type="textarea"
                    v-model="tableColumnsString"
                    :rows="6"
                    placeholder="请输入JSON格式的列配置"
                    @change="handleTableColumnsChange"
                  />
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="样式">
                <el-form-item label="表头背景色">
                  <el-color-picker
                    v-model="config.props.headerBgColor"
                    show-alpha
                    @change="updateProps('headerBgColor')"
                  />
                </el-form-item>
                
                <el-form-item label="表头文字颜色">
                  <el-color-picker
                    v-model="config.props.headerTextColor"
                    show-alpha
                    @change="updateProps('headerTextColor')"
                  />
                </el-form-item>
                
                <el-form-item label="行高">
                  <el-input-number
                    v-model="config.props.rowHeight"
                    :min="30"
                    :max="100"
                    @change="updateProps('rowHeight')"
                  />
                </el-form-item>
                
                <el-form-item label="显示边框">
                  <el-switch
                    v-model="config.props.showBorder"
                    @change="updateProps('showBorder')"
                  />
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </template>

        <!-- 计数器组件配置 -->
        <template v-if="component.type === 'counter'">
          <el-form-item label="起始值">
            <el-input-number
              v-model="config.props.start"
              :min="0"
              @change="updateProps('start')"
            />
          </el-form-item>
          
          <el-form-item label="结束值">
            <el-input-number
              v-model="config.props.end"
              :min="0"
              @change="updateProps('end')"
            />
          </el-form-item>
          
          <el-form-item label="动画时长(秒)">
            <el-input-number
              v-model="config.props.duration"
              :min="1"
              :max="10"
              @change="updateProps('duration')"
            />
          </el-form-item>
          
          <el-form-item label="数字颜色">
            <el-color-picker
              v-model="config.props.color"
              show-alpha
              @change="updateProps('color')"
            />
          </el-form-item>
          
          <el-form-item label="字体大小">
            <el-input-number
              v-model="config.props.fontSize"
              :min="12"
              :max="100"
              @change="updateProps('fontSize')"
            />
          </el-form-item>
        </template>

        <!-- 进度条组件配置 -->
        <template v-if="component.type === 'progress'">
          <el-form-item label="进度值">
            <el-slider
              v-model="config.props.percentage"
              :min="0"
              :max="100"
              @change="updateProps('percentage')"
            />
          </el-form-item>
          
          <el-form-item label="进度条颜色">
            <el-color-picker
              v-model="config.props.color"
              show-alpha
              @change="updateProps('color')"
            />
          </el-form-item>
          
          <el-form-item label="背景颜色">
            <el-color-picker
              v-model="config.props.bgColor"
              show-alpha
              @change="updateProps('bgColor')"
            />
          </el-form-item>
          
          <el-form-item label="显示文字">
            <el-switch
              v-model="config.props.showText"
              @change="updateProps('showText')"
            />
          </el-form-item>
          
          <el-form-item label="圆角">
            <el-input-number
              v-model="config.props.borderRadius"
              :min="0"
              :max="50"
              @change="updateProps('borderRadius')"
            />
          </el-form-item>
        </template>

        <!-- 统计卡片组件配置 -->
        <template v-if="component.type === 'statistic'">
          <el-form-item label="标题">
            <el-input
              v-model="config.props.title"
              @change="updateProps('title')"
            />
          </el-form-item>
          
          <el-form-item label="数值">
            <el-input-number
              v-model="config.props.value"
              @change="updateProps('value')"
            />
          </el-form-item>
          
          <el-form-item label="后缀">
            <el-input
              v-model="config.props.suffix"
              @change="updateProps('suffix')"
            />
          </el-form-item>
          
          <el-form-item label="标题颜色">
            <el-color-picker
              v-model="config.props.titleColor"
              show-alpha
              @change="updateProps('titleColor')"
            />
          </el-form-item>
          
          <el-form-item label="数值颜色">
            <el-color-picker
              v-model="config.props.valueColor"
              show-alpha
              @change="updateProps('valueColor')"
            />
          </el-form-item>
        </template>

        <!-- 时钟组件配置 -->
        <template v-if="component.type === 'clock'">
          <el-form-item label="时区">
            <el-select
              v-model="config.props.timezone"
              @change="updateProps('timezone')"
            >
              <el-option label="本地时间" value="local" />
              <el-option label="UTC" value="UTC" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="显示格式">
            <el-select
              v-model="config.props.format"
              @change="updateProps('format')"
            >
              <el-option label="24小时制" value="24" />
              <el-option label="12小时制" value="12" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="文字颜色">
            <el-color-picker
              v-model="config.props.color"
              show-alpha
              @change="updateProps('color')"
            />
          </el-form-item>
          
          <el-form-item label="字体大小">
            <el-input-number
              v-model="config.props.fontSize"
              :min="12"
              :max="100"
              @change="updateProps('fontSize')"
            />
          </el-form-item>
        </template>

        <!-- 视频组件配置 -->
        <template v-if="component.type === 'video'">
          <el-form-item label="视频地址">
            <el-input
              v-model="config.props.src"
              placeholder="请输入视频URL"
              @change="updateProps('src')"
            />
          </el-form-item>
          
          <el-form-item label="自动播放">
            <el-switch
              v-model="config.props.autoplay"
              @change="updateProps('autoplay')"
            />
          </el-form-item>
          
          <el-form-item label="循环播放">
            <el-switch
              v-model="config.props.loop"
              @change="updateProps('loop')"
            />
          </el-form-item>
          
          <el-form-item label="静音">
            <el-switch
              v-model="config.props.muted"
              @change="updateProps('muted')"
            />
          </el-form-item>
          
          <el-form-item label="显示控制条">
            <el-switch
              v-model="config.props.controls"
              @change="updateProps('controls')"
            />
          </el-form-item>
        </template>

        <!-- 轮播图组件配置 -->
        <template v-if="component.type === 'carousel'">
          <el-form-item label="图片列表">
            <el-input
              type="textarea"
              v-model="carouselImagesString"
              :rows="6"
              placeholder="请输入JSON格式的图片列表"
              @change="handleCarouselImagesChange"
            />
          </el-form-item>
          
          <el-form-item label="自动播放">
            <el-switch
              v-model="config.props.autoplay"
              @change="updateProps('autoplay')"
            />
          </el-form-item>
          
          <el-form-item label="播放间隔(秒)">
            <el-input-number
              v-model="config.props.interval"
              :min="1"
              :max="10"
              @change="updateProps('interval')"
            />
          </el-form-item>
          
          <el-form-item label="显示指示器">
            <el-switch
              v-model="config.props.showIndicators"
              @change="updateProps('showIndicators')"
            />
          </el-form-item>
          
          <el-form-item label="显示箭头">
            <el-switch
              v-model="config.props.showArrows"
              @change="updateProps('showArrows')"
            />
          </el-form-item>
        </template>

        <!-- 天气组件配置 -->
        <template v-if="component.type === 'weather'">
          <el-form-item label="城市">
            <el-input
              v-model="config.props.city"
              @change="updateProps('city')"
            />
          </el-form-item>
          
          <el-form-item label="API密钥">
            <el-input
              v-model="config.props.apiKey"
              type="password"
              @change="updateProps('apiKey')"
            />
          </el-form-item>
          
          <el-form-item label="温度单位">
            <el-select
              v-model="config.props.unit"
              @change="updateProps('unit')"
            >
              <el-option label="摄氏度" value="celsius" />
              <el-option label="华氏度" value="fahrenheit" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="文字颜色">
            <el-color-picker
              v-model="config.props.color"
              show-alpha
              @change="updateProps('color')"
            />
          </el-form-item>
        </template>

        <!-- 边框组件配置 -->
        <template v-if="component.type.startsWith('border-')">
          <el-form-item label="边框样式">
            <el-tabs>
              <el-tab-pane label="基础">
                <el-form-item label="边框颜色">
                  <el-color-picker 
                    v-model="config.props.borderColor" 
                    show-alpha
                    @change="updateProps('borderColor')"
                  />
                </el-form-item>
                
                <el-form-item label="边框宽度">
                  <el-input-number
                    v-model="config.props.borderWidth"
                    :min="1"
                    :max="20"
                    @change="updateProps('borderWidth')"
                  />
                </el-form-item>

                <el-form-item label="边框样式">
                  <el-select 
                    v-model="config.props.borderStyle"
                    @change="updateProps('borderStyle')"
                  >
                    <el-option label="实线" value="solid" />
                    <el-option label="虚线" value="dashed" />
                    <el-option label="点线" value="dotted" />
                  </el-select>
                </el-form-item>

                <el-form-item label="圆角">
                  <el-input-number
                    v-model="config.props.borderRadius"
                    :min="0"
                    :max="50"
                    @change="updateProps('borderRadius')"
                  />
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="装饰" v-if="['border-1', 'border-2', 'border-4', 'border-9'].includes(component.type)">
                <el-form-item label="装饰角颜色">
                  <el-color-picker 
                    v-model="config.props.cornerColor" 
                    show-alpha
                    @change="updateProps('cornerColor')"
                  />
                </el-form-item>

                <el-form-item label="装饰角长度">
                  <el-input-number
                    v-model="config.props.cornerLength"
                    :min="10"
                    :max="100"
                    @change="updateProps('cornerLength')"
                  />
                </el-form-item>

                <el-form-item label="装饰角宽度">
                  <el-input-number
                    v-model="config.props.cornerWidth"
                    :min="1"
                    :max="20"
                    @change="updateProps('cornerWidth')"
                  />
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="效果" v-if="['border-6', 'border-10'].includes(component.type)">
                <el-form-item label="发光颜色">
                  <el-color-picker 
                    v-model="config.props.glowColor" 
                    show-alpha
                    @change="updateProps('glowColor')"
                  />
                </el-form-item>

                <el-form-item label="发光大小">
                  <el-input-number
                    v-model="config.props.glowSize"
                    :min="5"
                    :max="50"
                    @change="updateProps('glowSize')"
                  />
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="动画" v-if="['border-7', 'border-12'].includes(component.type)">
                <el-form-item label="扫描线颜色">
                  <el-color-picker 
                    v-model="config.props.scanColor" 
                    show-alpha
                    @change="updateProps('scanColor')"
                  />
                </el-form-item>

                <el-form-item label="动画时长">
                  <el-input-number
                    v-model="config.props.scanDuration"
                    :min="1"
                    :max="10"
                    @change="updateProps('scanDuration')"
                  />
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </template>

        <!-- 装饰组件配置 -->
        <template v-if="component.type.startsWith('decoration-')">
          <el-form-item label="装饰配置">
            <el-tabs>
              <el-tab-pane label="基础">
                <el-form-item label="背景颜色">
                  <el-color-picker
                    v-model="config.props.bgColor"
                    show-alpha
                    @change="updateProps('bgColor')"
                  />
                </el-form-item>
                
                <el-form-item label="边框颜色">
                  <el-color-picker
                    v-model="config.props.borderColor"
                    show-alpha
                    @change="updateProps('borderColor')"
                  />
                </el-form-item>
                
                <el-form-item label="圆角">
                  <el-input-number
                    v-model="config.props.borderRadius"
                    :min="0"
                    :max="50"
                    @change="updateProps('borderRadius')"
                  />
                </el-form-item>
              </el-tab-pane>
              
              <el-tab-pane label="动画" v-if="['decoration-1', 'decoration-2', 'decoration-scan', 'decoration-light'].includes(component.type)">
                <el-form-item label="动画颜色">
                  <el-color-picker
                    v-model="config.props.animationColor"
                    show-alpha
                    @change="updateProps('animationColor')"
                  />
                </el-form-item>
                
                <el-form-item label="动画时长">
                  <el-input-number
                    v-model="config.props.animationDuration"
                    :min="1"
                    :max="10"
                    @change="updateProps('animationDuration')"
                  />
                </el-form-item>

                <template v-if="component.type === 'decoration-light'">
                  <el-form-item label="灯光类型">
                    <el-select
                      v-model="config.props.lightType"
                      @change="updateProps('lightType')"
                    >
                      <el-option label="脉冲" value="pulse" />
                      <el-option label="闪烁" value="blink" />
                      <el-option label="呼吸" value="breath" />
                    </el-select>
                  </el-form-item>
                </template>
              </el-tab-pane>

              <el-tab-pane label="粒子" v-if="component.type === 'decoration-particles'">
                <el-form-item label="粒子数量">
                  <el-input-number
                    v-model="config.props.particleCount"
                    :min="10"
                    :max="200"
                    @change="updateProps('particleCount')"
                  />
                </el-form-item>
                
                <el-form-item label="粒子颜色">
                  <el-color-picker
                    v-model="config.props.particleColor"
                    show-alpha
                    @change="updateProps('particleColor')"
                  />
                </el-form-item>
                
                <el-form-item label="粒子大小">
                  <el-input-number
                    v-model="config.props.particleSize"
                    :min="1"
                    :max="10"
                    @change="updateProps('particleSize')"
                  />
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="几何" v-if="['decoration-hexagon', 'decoration-circle', 'decoration-triangle'].includes(component.type)">
                <el-form-item label="几何颜色">
                  <el-color-picker
                    v-model="config.props.geometryColor"
                    show-alpha
                    @change="updateProps('geometryColor')"
                  />
                </el-form-item>
                
                <el-form-item label="几何大小">
                  <el-input-number
                    v-model="config.props.geometrySize"
                    :min="10"
                    :max="100"
                    @change="updateProps('geometrySize')"
                  />
                </el-form-item>
                
                <el-form-item label="旋转动画">
                  <el-switch
                    v-model="config.props.rotateAnimation"
                    @change="updateProps('rotateAnimation')"
                  />
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="路径" v-if="component.type === 'decoration-path'">
                <el-form-item label="路径颜色">
                  <el-color-picker
                    v-model="config.props.pathColor"
                    show-alpha
                    @change="updateProps('pathColor')"
                  />
                </el-form-item>
                
                <el-form-item label="路径宽度">
                  <el-input-number
                    v-model="config.props.pathWidth"
                    :min="1"
                    :max="10"
                    @change="updateProps('pathWidth')"
                  />
                </el-form-item>
                
                <el-form-item label="动画速度">
                  <el-slider
                    v-model="config.props.animationSpeed"
                    :min="1"
                    :max="10"
                    @change="updateProps('animationSpeed')"
                  />
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="波浪" v-if="component.type === 'decoration-wave'">
                <el-form-item label="波浪颜色">
                  <el-color-picker
                    v-model="config.props.waveColor"
                    show-alpha
                    @change="updateProps('waveColor')"
                  />
                </el-form-item>
                
                <el-form-item label="波浪数量">
                  <el-input-number
                    v-model="config.props.waveCount"
                    :min="1"
                    :max="5"
                    @change="updateProps('waveCount')"
                  />
                </el-form-item>
                
                <el-form-item label="波浪高度">
                  <el-input-number
                    v-model="config.props.waveHeight"
                    :min="10"
                    :max="100"
                    @change="updateProps('waveHeight')"
                  />
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </template>

        <!-- 列表组件配置 -->
        <template v-if="component.type.startsWith('list-')">
          <el-form-item label="列表配置">
            <el-tabs>
              <el-tab-pane label="数据">
                <el-form-item label="列表数据">
                  <el-input
                    type="textarea"
                    v-model="listDataString"
                    :rows="6"
                    placeholder="请输入JSON格式的列表数据"
                    @change="handleListDataChange"
                  />
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="样式">
                <el-form-item label="布局方式">
                  <el-select
                    v-model="config.props.itemLayout"
                    @change="updateProps('itemLayout')"
                  >
                    <el-option label="水平布局" value="horizontal" />
                    <el-option label="垂直布局" value="vertical" />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="显示边框">
                  <el-switch
                    v-model="config.props.bordered"
                    @change="updateProps('bordered')"
                  />
                </el-form-item>
                
                <el-form-item label="分割线">
                  <el-switch
                    v-model="config.props.split"
                    @change="updateProps('split')"
                  />
                </el-form-item>
                
                <el-form-item label="最大高度" v-if="component.type === 'list-scroll'">
                  <el-input-number
                    v-model="config.props.maxHeight"
                    :min="100"
                    :max="1000"
                    @change="updateProps('maxHeight')"
                  />
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </template>

        <!-- 地图组件配置 -->
        <template v-if="component.type.startsWith('map-')">
          <el-form-item label="地图配置">
            <el-tabs>
              <el-tab-pane label="基础">
                <el-form-item label="地图数据">
                  <el-input
                    type="textarea"
                    v-model="mapDataString"
                    :rows="6"
                    placeholder="请输入JSON格式的地图数据"
                    @change="handleMapDataChange"
                  />
                </el-form-item>
                
                <el-form-item label="缩放级别">
                  <el-slider
                    v-model="config.props.zoom"
                    :min="1"
                    :max="10"
                    @change="updateProps('zoom')"
                  />
                </el-form-item>
                
                <el-form-item label="允许缩放">
                  <el-switch
                    v-model="config.props.roam"
                    @change="updateProps('roam')"
                  />
                </el-form-item>
                
                <el-form-item label="显示标签">
                  <el-switch
                    v-model="config.props.showLabel"
                    @change="updateProps('showLabel')"
                  />
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="中心点">
                <el-form-item label="经度">
                  <el-input-number
                    v-model="config.props.center[0]"
                    :min="-180"
                    :max="180"
                    @change="updateMapCenter"
                  />
                </el-form-item>
                
                <el-form-item label="纬度">
                  <el-input-number
                    v-model="config.props.center[1]"
                    :min="-90"
                    :max="90"
                    @change="updateMapCenter"
                  />
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </template>

        <!-- iframe组件配置 -->
        <template v-if="component.type === 'iframe'">
          <el-form-item label="页面地址">
            <el-input
              v-model="config.props.src"
              placeholder="请输入页面URL"
              @change="updateProps('src')"
            />
          </el-form-item>
          
          <el-form-item label="允许全屏">
            <el-switch
              v-model="config.props.allowFullscreen"
              @change="updateProps('allowFullscreen')"
            />
          </el-form-item>
          
          <el-form-item label="滚动设置">
            <el-select
              v-model="config.props.scrolling"
              @change="updateProps('scrolling')"
            >
              <el-option label="自动" value="auto" />
              <el-option label="显示" value="yes" />
              <el-option label="隐藏" value="no" />
            </el-select>
          </el-form-item>
        </template>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { 
  InfoFilled, 
  Position, 
  Brush, 
  Refresh, 
  View, 
  Setting,
  Plus,
  Grid,
  Share,
  Edit
} from '@element-plus/icons-vue'
import { isChartComponent } from '@/data/componentConfig.js'
import { ElMessage } from 'element-plus'

const props = defineProps({
  component: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update'])

const config = ref({
  name: '',
  style: {
    left: 0,
    top: 0,
    width: 100,
    height: 100,
    rotate: 0,
    opacity: 100
  }
})

const dataString = ref('')
const tableDataString = ref('')
const tableColumnsString = ref('')
const carouselImagesString = ref('')
const listDataString = ref('')
const mapDataString = ref('')

const hasSpecificConfig = computed(() => {
  const type = props.component.type
  return true; // 所有组件都有配置选项
});

// 监听组件变化
watch(() => props.component, (newVal) => {
  if (newVal) {
    config.value = {
      ...newVal,
      style: {
        ...newVal.style,
        left: typeof newVal.style.left === 'number' ? `${newVal.style.left}px` : newVal.style.left,
        top: typeof newVal.style.top === 'number' ? `${newVal.style.top}px` : newVal.style.top,
        width: typeof newVal.style.width === 'number' ? `${newVal.style.width}px` : newVal.style.width,
        height: typeof newVal.style.height === 'number' ? `${newVal.style.height}px` : newVal.style.height,
        rotate: typeof newVal.style.rotate === 'number' ? `${newVal.style.rotate}deg` : newVal.style.rotate,
        opacity: typeof newVal.style.opacity === 'number' ? newVal.style.opacity : 100
      }
    }
    if (isChartComponent(newVal.type) && newVal.props?.data) {
      dataString.value = JSON.stringify(newVal.props.data, null, 2)
    }
    if (newVal.type.startsWith('table-') && newVal.props) {
      tableDataString.value = JSON.stringify(newVal.props.data || [], null, 2);
      tableColumnsString.value = JSON.stringify(newVal.props.columns || [], null, 2);
    }
    if (newVal.type === 'carousel' && newVal.props?.images){
        carouselImagesString.value = JSON.stringify(newVal.props.images, null, 2);
    }
    if (newVal.type.startsWith('list-') && newVal.props?.data) {
      listDataString.value = JSON.stringify(newVal.props.data, null, 2);
    }
    if (newVal.type.startsWith('map-') && newVal.props?.data) {
      mapDataString.value = JSON.stringify(newVal.props.data, null, 2);
    }
  }
}, { immediate: true, deep: true })

// 更新样式
const updateStyle = (key) => {
  let value = config.value.style[key]
  if (["left", "top", "width", "height"].includes(key)) {
    value = typeof value === 'number' ? `${value}px` : value
  }
  if (key === 'rotate') {
    value = typeof value === 'number' ? `${value}deg` : value
  }
  const style = {
    ...config.value.style,
    [key]: value
  }
  emit('update', {
    ...config.value,
    style
  })
}

// 更新配置
const updateConfig = () => {
  emit('update', config.value)
}

// 添加判断是否为柱状图的方法
const isBarChart = (type) => {
  return type?.startsWith('bar-')
}

// 添加数据处理相关
watch(() => props.component, (newVal) => {
  if (newVal && newVal.props?.data) {
    dataString.value = JSON.stringify(newVal.props.data, null, 2)
  }
}, { immediate: true })

const handleDataChange = () => {
  try {
    const data = JSON.parse(dataString.value)
    updateProps('data', data)
  } catch (error) {
    ElMessage.error('请输入有效的JSON格式数据')
  }
}

// 处理渐变色更新
const updateGradientColors = () => {
  updateProps('gradientColors', config.value.props.gradientColors)
}

// 处理颜色更新
const updateColors = () => {
  updateProps('color', config.value.props.color)
}

// 添加颜色
const addColor = () => {
  config.value.props.color.push(`rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`)
}

// 更新中心位置
const updateCenter = () => {
  updateProps('center', config.value.props.center)
}

const updateName = () => {
  emit('update', config.value)
}

const updateProps = (key, value) => {
  if (!config.value.props) {
    config.value.props = {};
  }
  if (value !== undefined) {
    config.value.props[key] = value;
  }
  emit('update', config.value);
}

const handleTableDataChange = () => {
  try {
    config.value.props.data = JSON.parse(tableDataString.value);
    updateProps();
  } catch (e) {
    ElMessage.error('表格数据格式不正确');
  }
};

const handleTableColumnsChange = () => {
  try {
    config.value.props.columns = JSON.parse(tableColumnsString.value);
    updateProps();
  } catch (e) {
    ElMessage.error('列表头格式不正确');
  }
};

const handleCarouselImagesChange = () => {
    try {
        config.value.props.images = JSON.parse(carouselImagesString.value);
        updateProps();
    } catch(e) {
        ElMessage.error('图片列表数据格式不正确')
    }
}

const handleListDataChange = () => {
  try {
    config.value.props.data = JSON.parse(listDataString.value);
    updateProps();
  } catch (e) {
    ElMessage.error('列表数据格式不正确');
  }
};

const handleMapDataChange = () => {
  try {
    config.value.props.data = JSON.parse(mapDataString.value);
    updateProps();
  } catch (e) {
    ElMessage.error('地图数据格式不正确');
  }
};

const updateMapCenter = () => {
  updateProps('center', config.value.props.center);
};
</script>

<style scoped>
.component-config {
  padding: 16px;
  height: calc(100vh - 90px);
  overflow-y: auto;
}

.config-form {
  --el-text-color-regular: #fff;
}

.config-section {
  background: #2a3555;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-form-item__label) {
  color: #999;
  padding-bottom: 4px;
}

:deep(.el-input),
:deep(.el-input-number),
:deep(.el-select) {
  --el-input-bg-color: #1d2537;
  --el-input-border-color: #3d4565;
  --el-input-hover-border-color: var(--el-color-primary);
  --el-input-text-color: #fff;
}

:deep(.el-slider) {
  --el-slider-main-bg-color: var(--el-color-primary);
  --el-slider-runway-bg-color: #1d2537;
  --el-slider-stop-bg-color: #1d2537;
  --el-slider-input-text-color: #fff;
  margin-top: 8px;
}

:deep(.el-radio-button__inner) {
  background: #1d2537;
  border-color: #3d4565;
  color: #fff;
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background-color: var(--el-color-primary);
  border-color: var(--el-color-primary);
  color: #fff;
}

:deep(.el-color-picker__trigger) {
  border-color: #3d4565;
}

/* 滚动条样式 */
.component-config::-webkit-scrollbar {
  width: 6px;
}

.component-config::-webkit-scrollbar-thumb {
  background: #3d4565;
  border-radius: 3px;
}

.component-config::-webkit-scrollbar-track {
  background: #1d2537;
}

.gradient-colors {
  display: flex;
  gap: 12px;
}

.color-pickers {
  display: flex;
  gap: 12px;
}

.color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style> 